import 'package:flutter/material.dart';
import 'package:flutter_vant/component/input.dart';
import 'package:rlstyles/main.dart';

class VanPasswordInput extends HookWidget {
  final String? value;
  final int length;
  final String? info;
  final String? errorInfo;
  final int gutter;
  final bool? mask;
  final bool focused;
  // 当前激活的位置
  int active = 0;
  VanPasswordInput({
    Key? key,
    this.length = 6,
    this.gutter = 0,
    this.value,
    this.info,
    this.errorInfo,
    this.mask = true,
    this.focused = false,
  }) : super(key: key) {
    if (value != null && value!.length > 0 && focused == true) {
      active = value!.length;
    }
  }
  getStyles() {
    return {
      'main': {
        CssRule.width: double.infinity,
      },
      'pass': {
        CssRule.flexWrap: 'wrap',
        CssRule.flexDirection: 'row',
        CssRule.flexWrapSpacing: gutter,
        CssRule.flexWrapRunSpacing: 10
      },
      'pass-item': {
        CssRule.width: ((100 / length).floorToDouble()).toString() + '%',
        CssRule.height: 50,
        CssRule.justifyContent: 'center',
        CssRule.alignItems: 'center',
        CssRule.borderRightWidth: 0.5,
        CssRule.borderRightColor: '#ebedf0',
        CssRule.borderRightStyle: 'solid',
        CssRule.backgroundColor: 'white',
        CssRule.fontSize: 20
      },
      'mask': {
        CssRule.width: 10,
        CssRule.height: 10,
        CssRule.borderRadius: 5,
        CssRule.backgroundColor: '#000000'
      },
      'info': {
        CssRule.justifyContent: 'center',
        CssRule.alignItems: 'center',
        CssRule.width: double.infinity,
        CssRule.marginTop: 10,
        CssRule.color: 'rgb(150, 151, 153)'
      }
    };
  }

  Widget renderPassItem(int index, List list) {
    String item = list[index];
    return Frame(
      styles: getStyles()['pass-item'],
      children: [
        mask == true && item.isNotEmpty
            ? Frame(styles: getStyles()['mask'])
            : Center(
                child: Container(
                  width: 20,
                  child: VanInput(
                    autofocus: active == index,
                    onFocus: () => active = index,
                    maxlength: 1,
                    keyboardType: TextInputType.number,
                  ),
                ),
              )
      ],
    );
  }

  List<String> getRangeArr() {
    final List<String> splitArr = (value ?? '').split('');
    if (splitArr.length > 0) {
      return List.generate(length, (index) {
        return index < splitArr.length ? splitArr[index] : '';
      });
    } else {
      return List.generate(length, (index) => '');
    }
  }

  renderPass() {
    List list = getRangeArr();
    return Frame(
      styles: getStyles()['pass'],
      children: getRangeArr()
          .asMap()
          .keys
          .map((e) => this.renderPassItem(e, list))
          .toList(),
    );
  }

  renderInfo() {
    return Frame(
      styles: getStyles()['info'],
      children: [TextView(errorInfo ?? (info ?? ''))],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Frame(
        styles: getStyles()['main'], children: [renderPass(), renderInfo()]);
  }
}
